<template>
<div class="tasks">
  <v-nav :path="path" :title="title"></v-nav>
  <div style="height:50px"></div>
  <div type="tab" class-name="tasks-tabs">
    <!-- <v-tab name="all-tasks" title="所有任务" status="active" -->
    <!-- distance="55" v-pull-to-refresh="refreshAll"> -->
      <!-- <v-layer></v-layer> -->
    <div class="all-profile">
        <!-- <div v-for="val in playerPageList" @click="goToPay(val.id,val.userid)" v-link="{path:'/user/pay/'+2+'/'+val.id+'/'+val.user_id}" class="logo"> -->
        <div v-for="val in playerPageList" @click="goToPay(val.user_id,5)" class="logo">
            <div class="logo_img">
                <img v-bind:src="val.headimg" class="img-responsive" style="border:solid 1px #fff;border-radius: 50px;overflow:hidden;" width="64" height="64">
                <div style="color:white;line-height: 1;width:90px">{{val.name}}</div>
            </div>
            <div class="logo_id">
              <span class="yue">ID:</span>
            <span class="yue">{{val.user_id}}</span>
            </div>
            <div class="logo_faka">
              <span class="yue">房卡数量:</span>
            <span class="yue">{{val.gems}}</span>
            </div>
            <div class="logo_leixing">
              <span class="yue">{{val.role_name}}</span>
            </div>
        </div>
    </div>
    <!-- </v-tab> -->
    <!-- <v-tab name="my-tasks" title="我的任务" -->
    <!-- distance="55" v-pull-to-refresh="refreshMine"> -->
      <!-- <v-layer></v-layer> -->
      <!-- <div class="myTasks">
          <v-card-container v-for="task in tasks | orderBy 'id' -1">
            <card type="header">{{task.title}}</card>
            <card type="content">
              <card type="content-inner">
              {{task.content}}
              </card>
            </card>
          </v-card-container>
      </div> -->
    <!-- </v-tab> -->
  </div>
  <nav class="text-center">
    <ul class="pagination pagination-sm">
        <li @click="getPlayerPageList()" v-if="this.p_id != 1" class="{{predisabled}}" aria-disabled="true"><a v-link="{path:'/user/profile/'+(p_id-1)}">上一页</a></li>
        <li v-else class="disabled"><a>上一页</a></li>
        <li @click="getPlayerPageList()" v-for="val in page" class="{{classActive($index+1)}}" ><a v-if="($index+1)>=this.p_id-3&&($index+1)<=this.p_id+3" v-link="{path:'/user/profile/'+($index+1)}">{{$index+1}}</a></li>
        <li @click="getPlayerPageList()" v-if="this.p_id != this.page" class="{{nextdisabled}}"><a  v-link="{path:'/user/profile/'+(p_id+1)}">下一页</a></li>
        <li v-else class="disabled"><a>下一页</a></li>
    </ul>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import _global from '../global'

export default {
  route: {
    data ({from, next}) {
      if (from.path === '/user') {
        this.path = from.path
      }
    }
  },
  ready () {
    // if (!window.localStorage.getItem('user_id')) {
    //   location.reload()
    //   this.$router.go('/')
    //   return
    // }
    if (window.localStorage.getItem('user_id')) {
      self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
    }
    $.init()
    this.getPlayerPageList()
  },
  data () {
    return {
      path: '/home',
      title: '玩家管理',
      id: 0,
      playerPageList: {},
      total: 0,
      page: 1,  // 总页数
      p_id: 1,  // 当前页
      pageSize: 6,  // 每页显示数量
      predisabled: '',
      active: 'active',
      nextdisabled: '',
      userId: 0
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  },
  methods: {
    goToPay (userid, roleid) {
      window.localStorage.setItem('role_id2', roleid)
      this.$router.go('/user/pay/' + 2 + '/' + userid+'/0')
    },
    getPlayerPageList () {
      let self = this
      if (window.localStorage.getItem('user_id')) {
        self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
        self.id = parseInt(window.localStorage.getItem('id'), 0)
        self.roleId = parseInt(window.localStorage.getItem('role_id'), 0)
      }
      // if (self.userId === 0) {
      //   return
      // }
      self.p_id = parseInt(this.$route.params.p_id, 0) || 1
      this.$http.get(_global.url + '/getPlayerPageList?userId=' + self.userId + '&id=' + self.id + '&role_id=' + self.roleId+ '&start=' + (self.p_id - 1) * self.pageSize + '&limit=' + self.pageSize).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        self.playerPageList = res.data.data
        self.total = res.data.pageCount
        self.page = Math.ceil(self.total / self.pageSize)
        console.log(self.playerPageList)
        // return self.playerPageList
      }, function(res) {
        console.log(res)
      })
    },
    classActive (index) {
      if (index === this.p_id) {
        return 'active'
      }
      return ''
    }
  },
  create () {
    this.getPlayerPageList()
  },
  components: {
    VNav
  }
}
</script>

<style>
.tasks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tasks-tabs .buttons-tab {
  z-index: 10;
  margin-top:2.2rem;
}
#all-profile, #my-tasks {
  top: 2rem;
}
.all-profile .logo {
  background-color: #A79C8D;
  border-radius: 10px;
  width: 95%;
  margin: auto;
  height: 80px;
  padding: 20.2666654px 21.333332px 5.333333px;
  box-shadow: 0 .0rem .8rem rgba(0,0,0,.3);
  margin-bottom: 0.2rem;
  position: relative;
}
.all-profile .logo .logo_img {
  margin-top: -16px;
  width: 58.666663px;
  height: 58.666663px;
  display: inline-block;
}
.all-profile .logo .logo_txt {
  margin-top: 7px;
  float: right;
  text-align: right;
}
.all-profile .logo .logo_txt .yue {
  color: #ffffff;
  font-size: 15.999999px;
}
.all-profile .logo .logo_txt .amount {
  display: block;
  margin-top: -6px;
  color: #ffffff;
  font-size: 45.8666638px;
}
.all-profile .logo .logo_id{
  color:white;
  width:5rem;
  position:absolute;
  display:block;
  top:0.2rem;
  left:6rem;
  font-size:15.999999px;
}
.all-profile .logo .logo_leixing{
  color:white;
  width:5rem;
  position:absolute;
  display:block;
  top:1rem;
  left:6rem;
  font-size:15.999999px;
}
.all-profile .logo .logo_faka{
  color:white;
  width:8rem;
  position:absolute;
  display:block;
  top:2rem;
  left:6rem;
  font-size:15.999999px;
}
</style>
